jQuery(function() {
	// 图片上传
	var $ = jQuery, $list = $('#fileList'),
	// 优化retina, 在retina下这个值是2
	ratio = window.devicePixelRatio || 1,
	// 缩略图大小
	thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,
	// Web Uploader实例
	uploader;
	// 初始化Web Uploader
	var uploader = WebUploader.create({
		// 自动上传。
		auto : false,
		// swf文件路径
		swf : '/static_resources/common/webuploader/Uploader.swf',
		// 文件接收服务端。
		server : 'uploaderfile.do',
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick : '#filePicker',
		// 只允许选择文件，可选。
		accept : {
			title : 'Images',
			extensions : 'gif,jpg,jpeg,bmp,png',
			mimeTypes : 'image/*'
		}
	});

	// 当有文件加进来
	uploader
			.on(
					'fileQueued',
					function(file) {

						var aidd = "a_" + file.id;
						var $li = $('<div id="'
								+ file.id
								+ '" class="file-item thumbnail">'
								+ '<img>'
								+
								// '<div class="info">' + file.name + '</div>' +
								"<a id=\""
								+ aidd
								+ "\" file-id=\""
								+ file.id
								+ "\" class=\"del_pic\"  data-id=\"0\" href=\"javascript:del_pic('"
								+ aidd + "');\">删除</a>" + '</div>'), $img = $li
								.find('img');

						// $list为容器jQuery实例
						$list.append($li);

						// 创建缩略图
						// 如果为非图片文件，可以不用调用此方法。
						// thumbnailWidth x thumbnailHeight 为 100 x 100
						uploader.makeThumb(file, function(error, src) {
							if (error) {
								$img.replaceWith('<span>不能预览</span>');
								return;
							}

							$img.attr('src', src);
						}, thumbnailWidth, thumbnailHeight);
					});

	// 文件上传过程中创建进度条实时显示。
	uploader.on('uploadProgress', function(file, percentage) {
		var $li = $('#' + file.id), $percent = $li.find('.progress span');

		// 避免重复创建
		if (!$percent.length) {
			$percent = $('<p class="progress"><span></span></p>').appendTo($li)
					.find('span');
		}

		$percent.css('width', percentage * 100 + '%');
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on('uploadSuccess', function(file) {
		$('#' + file.id).addClass('upload-state-done');
	});

	// 文件上传失败，现实上传出错。
	uploader.on('uploadError', function(file) {
		var $li = $('#' + file.id), $error = $li.find('div.error');
		// 避免重复创建
		if (!$error.length) {
			$error = $('<div class="error"></div>').appendTo($li);
		}
		$error.text('上传失败');
	});

	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on('uploadComplete', function(file) {
		$('#' + file.id).find('.progress').remove();
	});

	$("#tpBtn").on("click", function() {
		uploader.upload();
		// 后台方法
	})

	// 文件上传
	uploader1;
	var uploader1 = WebUploader.create({
		// 不压缩image
		resize : false,
		// swf文件路径
		swf : '/static_resources/common/webuploader/Uploader.swf',
		server : 'uploaderfile.do',
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick : '#picker'
	});

	// 当有文件添加进来的时候
	uploader1.on('fileQueued', function(file) {
		$('#thelist').append(
				'<div id="' + file.id + '" class="item">' + '<h4 class="info">'
						+ file.name + '</h4>' + '<p class="state">等待上传...</p>'
						+ '</div>');
	});

	// 文件上传过程中创建进度条实时显示。
	uploader1
			.on(
					'uploadProgress',
					function(file, percentage) {
						var $li = $('#' + file.id), $percent = $li
								.find('.progress .progress-bar');

						// 避免重复创建
						if (!$percent.length) {
							$percent = $(
									'<div class="progress progress-striped active">'
											+ '<div class="progress-bar" role="progressbar" style="width: 0%">'
											+ '</div>' + '</div>')
									.appendTo($li).find('.progress-bar');
						}

						$li.find('p.state').text('上传中');

						$percent.css('width', percentage * 100 + '%');
					});

	uploader1.on('uploadSuccess', function(file) {
		$('#' + file.id).find('p.state').text('已上传');
	});

	uploader1.on('uploadError', function(file) {
		$('#' + file.id).find('p.state').text('上传出错');
	});

	uploader1.on('uploadComplete', function(file) {
		$('#' + file.id).find('.progress').fadeOut();
	});

	// 文件上传
	$("#wjBtn").on('click', function() {
		uploader1.upload();
	});

	// 加载数据
	 $.ajax({
		dataType : 'json',
		url : 'data.do',
		error : function(XMLHttpRequest, textStatus, errorThrown) {
			alert(XMLHttpRequest.status);
			alert(XMLHttpRequest.readyState);
			alert(textStatus);
			alert("服务器错误")
		},
		success : function(data) {
			$.each(data.users, function(i, item) {
				$("#itemContainer").append(
						"<li id=" + i + ">" + item.name + "</li> ");
			});
			
			$("div.holder").jPages({
				containerID : "itemContainer",
				previous : "←",
				next : "→",
				perPage : 5,
				delay : 10,
				keyBrowse : true
			});

		}
	});

	

});

// 删除图片
function del_pic(obj) {
	if (window.confirm('您确认要删除此图片么?')) {
		var objj = document.getElementById(obj);
		var fileid = $(objj).attr("file-id");
		var dataid = $(objj).attr("data-id");
		$("#" + fileid).remove();
	}
}